
<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8 lte_ie9"> <![endif]--> 
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8 lte_ie9"> <![endif]--> 
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8 lte_ie9"> <![endif]--> 
<!--[if lte IE 8 ]> <html class="lte_ie8 lte_ie9"> <![endif]--> 
<!--[if lte IE 9 ]> <html class="lte_ie9"> <![endif]--> 
<!--[if (gte IE 10)|!(IE)]><!--><html><!--<![endif]-->
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>查看流程设计图</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if lte IE 8]>
        <script type="text/javascript" src="/static/js/ccorrect_btn.js"></script>
    <![endif]-->
    
<script src="agent.js" type="text/javascript"></script>
<script type="text/javascript" >
   var MYOA_JS_SERVER = "";
   var MYOA_STATIC_SERVER = "";
   window._td_ba && window._td_ba.server && (window._td_ba.server.guid = '{330047A2-B27F-6D52-EA5B-ECD662A2D572}');
</script>
</head>
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="flow_view.css"/>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
<!--<script type="text/javascript" src="js_lang.php"></script>-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" src="jquery-plumb-1.5.2-min.js"></script>
	<script>
        // chrome fix.
	    document.onselectstart = function () { return false; };	 
        
        $(document).ready(function(){            
            $.getJSON("get_prcs.php?FLOW_ID=146",function(json){
				// console.log(json);
                var fillColor = "gray";	//设置连线的颜色
                //jsPlumb.setRenderMode(jsPlumb.VML);
	    		jsPlumb.Defaults.Connector = [ "Straight", { curviness:5} ];
	    		jsPlumb.Defaults.DragOptions = { cursor: "pointer", zIndex:2000 };
	    		jsPlumb.Defaults.PaintStyle = { strokeStyle:fillColor, lineWidth:2 };//设置连线的宽度
	    		jsPlumb.Defaults.EndpointStyle = { radius:4, fillStyle:fillColor };//设置连接点的大小
                jsPlumb.Defaults.isSource=true;
                var anchors = [[0.5, 0, 0, -1], [1, 0.5, 1, 0], [0.5, 1, 0, 1], [0, 0.5, -1, 0] ];
                var arrowCommon = { foldback:0.7, fillStyle:fillColor, width:14 };//设置连线箭头的大小
	    		var aConnection = {	
	    			dynamicAnchors:anchors,
	    			overlays:[ 				
	    			    [ "Arrow", { location:0.7 }, arrowCommon ]//设置连线箭头的位置
	    			]
	    		};
	    		
	    	    if(json.total > 0)
	    		{
	    		    $.each(json.list, function(i,row) {
						console.log(json.list);
	    		        var nodeDiv = document.createElement('div');
					    var nodeId = "window"+row.prcs_id;
					    $(nodeDiv)
					        .attr("id",nodeId)
					        .attr("to",row.to)
					        .addClass("window window_"+row.prcs_type)
					        .css({"left":parseInt(row.left),"top":parseInt(row.top)+60})
					        .attr("title",row.title)
					        .html('<table class="window-content"><tr><td>'+row.prcs_content+'</td></tr></table>');					       
					    $("#prcsList").append(nodeDiv);
					   
	    		    });
	    		    
	    		    //遍历节点并连线
	    		    $(".window").each(function(){
	    		        toArr = $(this).attr("to").split(",");
						var dynamicAnchors = [ "Right", "Left" ];
						// jsPlumb.draggable(jsPlumb.getSelector("#"+this.id));
					    for(var i in toArr)
					    {
					        if(toArr[i]!="" && $("#window"+toArr[i]).size()>0 && this.id!="window"+toArr[i])
					        {
                                jsPlumb.connect({source:this.id, target:"window"+toArr[i], anchor:[[ "Perimeter", { shape:"Rectangle", rotation:0 }],[ "Perimeter", { shape:"Rectangle", rotation:0 }]]},aConnection);
                            }
                        }
	    		    });

	    		    $("[title]").tooltip();
	    		}
            });
        });
	</script>
    <body>
        <div id="canvas" class="canvas">
            <div class="explanation">
                <span class="big3"><img src="./images/workflow.gif" align="absmiddle" /> 流程名称:请假申请单, 流程分类:人力资源</span>
                <div>
                颜色标识说明：<span style="color:#50C625;">■</span>开始节点                &nbsp;&nbsp;<span style="color:#F4A8BD;">■</span>结束节点                &nbsp;&nbsp;<span style="color:#EEEEEE;">■</span>普通节点                &nbsp;&nbsp;<span style="color:#7D26CD;">■</span>子流程节点                &nbsp;&nbsp;<span style="color:#FFBC18;">■</span>外部节点                </div>
            </div>
            <div id="prcsList">
		    </div>
        </div>
    </body>
</html>